<!doctype html>
<html>
<body>
<script>
    var yourVideo = document.querySelector('#yours');
    var theirVideo = document.querySelector('#theirs');

    /* navigator.getUserMedia({ video: true, audio: false }, function (stream) {
        yourVideo.src = window.URL.createObjectURL(stream);

        startPeerConnection(stream);

    }, function (error) {
        console.log(error);
    }); */

    startPeerConnection(null);

function startPeerConnection(stream) {
    var configuration = {
        // 'iceServers': [{ 'url': 'stun:stun.1.google.com:19302'}]
    };
    /* console.log(stream);
    console.log("\n");
    console.log("\n"); */

    const yourConnection = new RTCPeerConnection(configuration);
    const theirConnection = new RTCPeerConnection(configuration);
    console.log('yourConnection: ', yourConnection);
    // console.log("\n");
    // console.log("\n");

    console.log('theirConnection: ', theirConnection);
    // console.log("\n");
    // console.log("\n");

    /* yourConnection.addStream(stream);
    theirConnection.onaddstream = function(e) {
        console.log('onaddstream: ', e);
        // console.log("\n");
        // console.log("\n");

        theirVideo.src = window.URL.createObjectURL(e.stream);
    }; */


    const sendChannel = yourConnection.createDataChannel("sendChannel");
    sendChannel.onopen = () => {
      console.log('send channel open');

      sendChannel.send('req');
    };
    sendChannel.onclose = () => {
      console.log('send channel close');
    };
    sendChannel.onmessage = m => {
      const {data} = m;
      console.log('send channel message', data);
    };
    theirConnection.ondatachannel = e => {
      console.log('got remote data channel');

      const {channel: recvChannel} = e;
      recvChannel.onopen = () => {
        console.log('recv channel open');
      };
      recvChannel.onclose = () => {
        console.log('recv channel close');
      };
      recvChannel.onmessage = m => {
        const {data} = m;
        console.log('got recv channel message', data);

        recvChannel.send('res');
      };
    };

    yourConnection.onicecandidate = function (event) {
        console.log('your onicecandidate: ', event);
        // console.log("\n");
        // console.log("\n");

        if (event.candidate) {
            theirConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
        }
    };

    theirConnection.onicecandidate = function (event) {
        console.log('their onicecandidate:', event);
        // console.log("\n");
        // console.log("\n");

        if (event.candidate) {
            yourConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
        }
    }

    yourConnection.createOffer(function (offer) {
        console.log('your offer: ', offer);
        // console.log("\n");
        // console.log("\n");

        yourConnection.setLocalDescription(offer);
        theirConnection.setRemoteDescription(offer);

        theirConnection.createAnswer(function (offer) {
            console.log('their offer: ', offer);
            // console.log("\n");
            // console.log("\n");

            theirConnection.setLocalDescription(offer);
            yourConnection.setRemoteDescription(offer);
        }, function (error) {
            console.log(error);
        });
    }, function (error) {
        console.log(error);
    });
    }
</script>
</body>
</html>
